<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="newAdd">
        <h1>新增成员</h1>
        <form class="info" autocomplete="off">
            姓名：<input type="text" class="uname" name="uname"/>
            年龄: <input type="text" class="age" name="age"/>
            性别：
            <select class="gender" name="gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            薪资：<input type="text" class="salary" name="salary"/>
            就业城市：
            <select class="city" name="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
                <option value="郑州">郑州</option>
            </select>
            <button class="add">录入</button>
        </form>
    </div>
    
    <div class="list">
        <h1>就业榜</h1>
        <table>
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>薪资</th>
              <th>就业城市</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 
              <tr>
                <td>1001</td>
                <td>欧阳霸天</td>
                <td>19</td>
                <td>男</td>
                <td>15000</td>
                <td>上海</td>
                <td>
                  <a href="javascript:">删除</a>
                </td>
              </tr> 
              -->
          </tbody>
        </table>  
    </div>

 <script>
    // 获取元素
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')
    const tbody = document.querySelector('tbody')
    // 获取所有带有name属性的 元素
    const items = document.querySelectorAll('[name]')
    const arr = []

    // 1. 录入模块
    // 1.1 表单提交模块
    const info = document.querySelector('.info')
    info.addEventListener('submit',function(e){
        // 阻止默认行为 不跳转
        e.preventDefault()
        // console.log(11)

        // 先进行表单验证，如果不通过，直接中断，不需要添加数据
        // 先遍历循环
        for( let i = 0; i <items.length; i++){
            if(items[i].value === ''){
                return alert('输入不能为空')
            }
        }
        // 创建新的对象
        const obj = {
            stuId: arr.length +1,
            uname: uname.value,
            age: age.value,
            gender: gender.value,
            salary: salary.value,
            city: city.value
        }
        // console.log(obj)
        // 追加给数组里面
        arr.push(obj)
        // console.log(arr)
        // 清空表单 使用css属性 type="reset" 重置
        this.reset()
        // 调用渲染函数
        render()
    })

    //2.渲染函数 因为增加和删除都需要渲染
    function render(){
        // 先清空tbody， 把最新数组里面的数据渲染完毕
        tbody.innerHTML = ''
        // 遍历arr数组
        for( let i = 0; i < arr.length; i++){
            // 生成tr
            const tr = document.createElement('tr')
            tr.innerHTML =`
                <td>${arr[i].stuId}</td>
                <td>${arr[i].uname}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].gender}</td>
                <td>${arr[i].salary}</td>
                <td>${arr[i].city}</td>
                <td>
                  <a href="javascript:" data-id${i}>删除</a>
                </td>
            `
                //追加元素 父元素.appendChild(子元素)
                tbody.appendChild(tr)
        }
    }
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 得到当前元素的自定义属性 data-id
        // console.log(e.target.dataset.id)
        // 删除arr 数组里面对应的数据
        arr.splice(e.target.dataset.id, 1)
        console.log(arr)
        // 从新渲染一次
        render()
      }
    })
 </script>
</body>
</html>